<template>
  <div>
    <el-form :inline="true" :model="ruleForm" class="demo-form-inline" ref="ruleForm">
      <el-form-item label="类型">
        <el-select v-model="ruleForm.key" placeholder="图书类型">
          <el-option v-for="(value,index) in kinds" :key="index" :label="value.kindName" :value="value.kindId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="书名">
        <el-input v-model="ruleForm.value" placeholder="图书名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="display-one" v-for="value in booksForm">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <Books :book="value"/>
          <el-button @click="borrow(value)" type="success">借阅</el-button>
        </div>
      </el-col>
    </el-row>
    <el-pagination
        layout="prev, pager, next"
        :total="parseInt(total)"
        style="margin-top: 18px"
        @current-change="page"
    >
    </el-pagination>
  </div>
</template>

<script>

import Books from "@/components/Books";

export default {
  name: "BooksDisplay",
  components: {
    Books
  },
  data() {
    return {
      size: 7,
      booksForm: '',
      total: '',
      borrowList:{
        uId:"",
        bookId:'',
        borrowEnd:'',
        kindId:''
      },
      ruleForm:{
        key: '',
        value: '',
        page: '',
        size: 7
      },
      user:'',
      kinds:''
    }
  },
  methods: {
    page(currentPage) {
      const _this = this
      if (_this.ruleForm.value==''&&_this.ruleForm.key==''){
        axios.get('http://localhost:8089/books/pageList/' + currentPage + '/' + _this.size).then(
            function (response) {
              _this.booksForm = response.data.data.data
              _this.total = response.data.data.total
            }
        )
      }else{
        _this.ruleForm.page=currentPage
        axios.get('http://localhost:8089/books/search',{params:_this.ruleForm}).then(
            function (response) {
              _this.booksForm=response.data.data.data
              _this.total=response.data.data.total
            }
        )
      }
    },
    borrow(value){

      const _this=this
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 3; // 月
      let day = date.getDate(); // 日
      let s=year+"-"+month+"-"+day

      this.borrowList.borrowEnd=s
      this.borrowList.bookId=value.bookId
      this.borrowList.kindId=value.kindId
      this.user=JSON.parse(localStorage.getItem("user"))
      this.borrowList.uId=this.user.uid

      if (confirm("确认借阅吗?")){
        axios.get("http://localhost:8089/borrow/saveBorrow",{params:_this.borrowList}).then(
            function (response) {
              if (response.data.code==2){
                confirm("您已经借阅过这本书");
              }else{
                confirm("成功");
              }
            }
        )

      }
    },
    onSubmit() {
      //让翻页复原
      this.currentPage=1;
      this.$refs.ruleForm.validate((valid)=>{
        if (valid){
          const _this=this
          _this.ruleForm.page=_this.currentPage
          axios.get('http://localhost:8089/books/search',{params:_this.ruleForm}).then(
              function (response) {
                _this.booksForm=response.data.data.data
                _this.total=response.data.data.total
              }
          )
        }
      })
    }
  },
  created() {
    const _this = this
    axios.get("http://localhost:8089/books/pageList/1" + "/"+_this.size).then(
        function (response) {
          if (response.data.code != 1) {
            _this.booksForm = response.data.data.data
            _this.total = response.data.data.total
          }
        }
    );
    axios.get("http://localhost:8089/kinds/getKinds").then(
        function (response) {
          _this.kinds=response.data.data
        }
    )
  }
}
</script>

<style scoped>
.display-one {
  margin-top: 15px;
}

.bg-purple-dark {
  background: #99a9bf;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>